<template>
	<view>
		<view style="height: 87rpx;"></view>
		<view class="header">
			<view class="header-con">
				<view class="top-address" @tap="address_show_action()">
					<image src="../../static/images/ditu-icon.png" style="position: absolute;top: 10rpx;left: 0px;width:24rpx ;height:28rpx ;"></image>
					{{ choose_address1.town }}
					<image src="../../static/images/sanjiaoxing.png" style="position: absolute;bottom: 17rpx;right: 0px;width:14rpx ;height:14rpx ;"></image>
				</view>
				<view class="header-input-container">
					<input type="text" placeholder="请输入关键字" v-model="keywords" placeholder-style="color:#999999;font-size:28rpx;text-align:center" />
					<image src="../../static/images/search.png" @tap="getdata()"></image>
				</view>
			</view>
		</view>
		<view class="bar-list">
			<image src="../../static/images/noshuju.png" class="no-data" v-show="noshuju"></image>
			<view class="bar-item uni-row border-bottom" v-for="(item, index) in barlist" :key="index" :data-id="item.id" @tap="barinfo">
				<view class="bar-icon"><image :src="item.filepath"></image></view>
				<view class="bar-info">
					<view class="bar-name">{{ item.name }}</view>
					<view class="bar-jianjie">{{ item.signature }}</view>
				</view>
			</view>
		</view>
		<!-- 地址弹出框 -->
		<view v-show="address_show">
			<view class="mark"></view>
			<view class="address-container">
				<view class="address-title border-bottom">
					<image src="../../static/images/shuaxin.png" style="width:171rpx;height:54rpx;position: absolute;top: 25rpx;left: 20rpx;" @tap="shuaxin()"></image>
					{{ choose_address1.province }}——{{ choose_address1.city }}
					<image src="../../static/images/pay-close.png" style="float: right;width: 32rpx;height: 32rpx;" @tap="close_address()"></image>
				</view>
				<view class="uni-row">
					<view class="address-item" style="border-right: 1px solid #F2F2F2;">
						<scroll-view scroll-y="true" class="scroll-view">
							<view>
								<view class="city-name " v-for="(item, index) in provinces" :key="index" @tap="xuanzedizhi" :data-id="item.id" :data-index="index">
									<image :src="item.img"></image>
									{{ item.name }}
								</view>
							</view>
						</scroll-view>
					</view>
					<view class="address-item" style="padding-left: 32rpx;box-sizing: border-box;">
						<scroll-view scroll-y="true" class="scroll-view">
							<view>
								<view class="city-name " v-for="(item, index) in citys" :key="index" @tap="xuanzecity" :data-id="item.id" :data-name="item.name">
									<image :src="item.img"></image>
									{{ item.name }}
								</view>
							</view>
						</scroll-view>
					</view>
					<view class="address-item" style="padding-left: 32rpx;box-sizing: border-box;">
						<scroll-view scroll-y="true" class="scroll-view">
							<view>
								<view class="city-name " v-for="(item, index) in townlist" @tap="xuanzetown" :key="index" :data-id="item.id" :data-name="item.name">
									<image :src="item.img"></image>
									{{ item.name }}
								</view>
							</view>
						</scroll-view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import amap from '@/components/js-amap/amap-wx.js';
import httpPath from '@/static/js/path.js';
var page = 1;
import MescrollUni from '@/components/uni-load-more.vue';
export default {
	data() {
		return {
			id: '',
			loadingType: 0,
			contentText: {
				contentdown: '上拉显示更多',
				contentrefresh: '正在加载...',
				contentnomore: '没有更多数据了'
			},
			barlist: {},
			noshuju: false, //是否出现没有数据的图片
			address_show: false,
			amapPlugin: null,
			provinces: [],
			citys: [],
			choosedprovinces: '',
			key: '127a8a73b4bb644c0893d7a4d14b246a',
			region: {},
			choosedcity: '',
			choose_address1: {province:"甘肃",provinceid:"28",city:"兰州市",cityid:"448",townid:4773,town:"七里河区"},
			provincesindex: 0,
			cityindex: 0,
			townlist: [],
			address:[],
			keywords:"",
		};
	},
	components: {
		MescrollUni
	},
	onPullDownRefresh() {
		page = 1;
		this.loadingType = 0;
		this.getdata();
		setTimeout(function() {
			uni.stopPullDownRefresh();
		}, 1000);
	},
	onReachBottom: function() {
		if (this.loadingType != 0) {
			//loadingType!=0;直接返回
			return false;
		}
		
		this.loadingType = 1;
		uni.showNavigationBarLoading(); //显示加载动画
		page++; //每触底一次 page +1
		let data={ province_id: this.choose_address1.provinceid, city_id: this.choose_address1.cityid, page: page }
		if(this.keywords){
			data.keywords=this.keywords
		}
		uni.request({
			url: httpPath.filePath + '/index/store/index',
			method: 'POST',
			header: { 'content-type': 'application/x-www-form-urlencoded' },
			data:data,
			success: res => {
				if (res.data.data.length == 0) {
					//没有数据
					this.loadingType = 2;
					uni.hideNavigationBarLoading(); //关闭加载动画
					return false;
				}
				for (let i = 0; i < res.data.data.length; i++) {
					this.barlist.push(res.data.data[i]);
				}
				this.loadingType = 0; //将loadingType归0重置
				uni.hideNavigationBarLoading(); //关闭加载动画
			}
		});
	},
	onShow() {
		this.amapPlugin = new amap.AMapWX({
			key: this.key
		});
		this.getaddress();
	},
	onLoad(option) {
		this.amapPlugin = new amap.AMapWX({
			key: this.key
		});
		this.id = option.id;
		this.loadingType = 0;
		page = 1;
		if(option.keywords){
			this.keywords=option.keywords
		}
		this.getdata();
		this.getaddress();
		
	},
	methods: {
		shuaxin(){
			let $this=this;
			uni.removeStorage({
			    key: 'choose_address1',
			    success: function (res) {
			        $this.getaddress();
					$this.address_show=false;
			    }
			});
		},
		/**
		 * 获得地区
		 */
		getaddress() {
			uni.request({
				url: httpPath.filePath + '/index/regoin/index',
				method: 'POST',
				header: { 'content-type': 'application/x-www-form-urlencoded' },
				data: {},
				success: res => {
					this.address = res.data.data.region;
					uni.setStorage({
						key: 'address',
						data: res.data.data.region,
						success: function() {}
					});
					this.getloaction();
				}
			});
		},
		/**
		 * 获取当前定位
		 */
		getloaction() {
			let $this = this;
			const value = uni.getStorageSync('choose_address1');
			const address = uni.getStorageSync('address');
			if (!value) {
				this.amapPlugin.getRegeo({
					success: data => {
						let province = data[0].regeocodeData.addressComponent.province;
						let city = data[0].regeocodeData.addressComponent.city;
						let district = data[0].regeocodeData.addressComponent.district;
						if (province.substring(province.length - 1, province.length) == '省') {
							province = province.substring(0, province.length - 1);
						}
						let provinceid = '';
						let cityid = '';
						let townid = '';
						let address = this.address;	
						for (let i = 0; i < address.length; i++) {
							if (province == address[i].name) {	
								provinceid = address[i].id;
								for (let j = 0; j < address[i].city.length; j++) {
									if (city == address[i].city[j].name) {
										cityid = address[i].city[j].id;
										for (let a = 0; a < address[i].city[j].county.length; a++) {
											if (district == address[i].city[j].county[a].name) {
												townid = address[i].city[j].county[a].id;
											}
											// break;
										}
										// break;
									}
								}
								// break;
							}
						}

						$this.choose_address1.city = city;
						$this.choose_address1.province = province;
						$this.choose_address1.provinceid = provinceid;
						$this.choose_address1.cityid = cityid;
						$this.choose_address1.townid = townid;
						$this.choose_address1.town = district;
						uni.setStorage({
							key: 'choose_address1',
							data: $this.choose_address1,
							success: function() {
								$this.getdata();
							}
						});
						
					}
				});
			} else {
				let $this = this;
				uni.getStorage({
					key: 'choose_address1',
					success: function(res) {
						$this.choose_address1 = res.data;
						$this.getdata();
					}
				});
			}
		},
		close_address() {
			this.address_show = false;
		},
		address_show_action() {
			let $this = this;
			$this.provinces = [];
			const address = uni.getStorageSync('address');
			if (!address) {
				this.getaddress();
			}
			uni.getStorage({
				key: 'address',
				success: function(res) {
					$this.region = res.data;
					for (let i = 0; i < res.data.length; i++) {
						$this.provinces.push({ name: res.data[i].name, id: res.data[i].id, checked: 0, img: '../../static/images/weixuanzhong.png' });
					}
				}
			});
			this.address_show = true;
		},
		/**
		 *选择省
		 */
		xuanzedizhi(e) {
			let $this = this;
			this.citys = [];
			let id = e.currentTarget.dataset.id;
			let index = e.currentTarget.dataset.index;
			for (let i = 0; i < $this.region.length; i++) {
				if ($this.region[i].id == id) {
					$this.provincesindex = i;
					$this.provinces[i].img = '../../static/images/xuanzhong.png';
					$this.provinces[i].check = 1;
					// $this.choosedprovinces = $this.provinces[i].name;
					$this.choose_address1.province = $this.provinces[i].name;
					$this.choose_address1.provinceid = $this.provinces[i].id;
					for (let j = 0; j < $this.region[i].city.length; j++) {
						$this.citys.push({ name: $this.region[i].city[j].name, id: $this.region[i].city[j].id, checked: 0, img: '../../static/images/weixuanzhong.png' });
					}
				} else {
					$this.provinces[i].img = '../../static/images/weixuanzhong.png';
					$this.provinces[i].check = 0;
				}
			}
		}
		/**
		 * 选择市
		 */,
		xuanzecity(e) {
			let $this = this;
			this.choose_address1.cityid = e.currentTarget.dataset.id;
			this.choose_address1.city = e.currentTarget.dataset.name;
			let citylist = this.region[this.provincesindex].city;

			for (let j = 0; j < citylist.length; j++) {
				if (citylist[j].id == this.choose_address1.cityid) {
					this.cityindex = j;
					$this.citys[j].img = '../../static/images/xuanzhong.png';
					$this.citys[j].check = 1;
					let townlist = citylist[j].county;
					this.townlist = [];
					for (let a = 0; a < townlist.length; a++) {
						this.townlist.push({ name: townlist[a].name, id: townlist[a].id, checked: 0, img: '../../static/images/weixuanzhong.png' });
					}
				} else {
					$this.citys[j].img = '../../static/images/weixuanzhong.png';
					$this.citys[j].check = 0;
				}
			}
		}
		/**
		 * 选择区县
		 */,
		xuanzetown(e) {
			let $this = this;
			this.choose_address1.townid = e.currentTarget.dataset.id;
			this.choose_address1.town = e.currentTarget.dataset.name;
			let townslist = this.region[this.provincesindex].city[this.cityindex];

			for (let j = 0; j < townslist.length; j++) {
				if (townslist[j].id == this.choose_address1.townid) {
					this.cityindex = j;
					$this.townlist[j].img = '../../static/images/xuanzhong.png';
					$this.townlist[j].check = 1;
				} else {
					$this.townlist[j].img = '../../static/images/weixuanzhong.png';
					$this.townlist[j].check = 0;
				}
			}
			uni.setStorage({
				key: 'choose_address1',
				data: this.choose_address1,
				success: function() {
					$this.address_show = false;
					$this.getdata();
				}
			});
			// this.diqu=this.choose_address1.province+this.choose_address1.city+this.choose_address1.town;
			this.address_show = false;
		},
		/**
		 *去往详情页面
		 */
		barinfo(e) {
			uni.navigateTo({
				url: 'barinfo?id=' + e.currentTarget.dataset.id
			});
		},
		/**
		 * 获取数据
		 */
		getdata() {
			page=1;
			let data={ province_id: this.choose_address1.provinceid, city_id: this.choose_address1.cityid, page: page }
			if(this.keywords){
				
				data.keywords=this.keywords
			}
			
			uni.request({
				url: httpPath.filePath + '/index/store/index',
				method: 'POST',
				header: { 'content-type': 'application/x-www-form-urlencoded' },
				data: data,
				success: res => {
					if (res.data.code == 200) {
						if (res.data.data.length != 0) {
							this.noshuju = false;
							this.barlist = res.data.data;
						} else {
							this.barlist = res.data.data;
							this.noshuju = true;
						}
					}
				}
			});
		}
	}
};
</script>

<style>
.address-title {
	font-size: 32rpx;
	font-weight: bold;
	color: #7adba8;
	text-align: center;
	padding-bottom: 20rpx;
}
.scroll-view {
	height: 100%;
}
.city-name {
	height: 90rpx;
	line-height: 90rpx;
	font-size: 28rpx;
	color: #666;
}
.city-name image {
	width: 36rpx;
	height: 36rpx;
	vertical-align: middle;
	margin-right: 20rpx;
}
.address-container {
	z-index: 100000;
	position: fixed;
	top: 85rpx;
	left: 0px;
	background: #fff;
	height: 662rpx;
	padding: 32rpx;
	box-sizing: border-box;
	width: 100%;
}
.address-item {
	width: 33.3%;
	height: 550rpx;
	box-sizing: border-box;
}
.header-con {
	display: flex;
	justify-content: flex-start;
}
.top-address {
	width: 150rpx;
	position: relative;
	font-size: 28rpx;
	color: #fff;
	margin: 0px 32rpx;
	text-align: center;
	padding: 0px 25rpx;
	box-sizing: border-box;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}
.header {
	height: 85rpx;
	background: #333;
	padding-top: 16rpx;
	position: fixed;
	top: 0rpx;
	left: 0px;
	width: 100%;
	z-index: 1000;
}
.header-input-container {
	width: 488rpx;
	height: 57rpx;
	border-radius: 30rpx;
	position: relative;
	background: #fff;
}
.header-input-container input {
	width: 100%;
	height: 100%;
	padding-left: 20rpx;
	background: #fff;
	border: none;
	border-radius: 30rpx;
}
.header-input-container image {
	width: 29rpx;
	height: 36rpx;
	position: absolute;
	top: 10rpx;
	right: 20rpx;
	z-index: 1000;
}
.bar-list {
	width: 686rpx;
	margin: auto;
}
.bar-item {
	padding: 36rpx 0px;
}
.bar-icon {
	width: 195rpx;
	height: 195rpx;
	border-radius: 5px;
}
.bar-icon image {
	width: 100%;
	height: 100%;
	border-radius: 5px;
}
.bar-info {
	width: 451rpx;
	margin-left: 37rpx;
}
.bar-name {
	font-size: 32rpx;
	font-weight: bold;
	margin-bottom: 18rpx;
}
.bar-jianjie {
	font-size: 28rpx;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: normal !important;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
	line-height: 46rpx;
	height: 138rpx;
	text-indent: 2em;
}
</style>
